/*
 * @Description:
 * @Author: Cxy
 * @Date: 2023-05-13 23:12:19
 * @LastEditors: Cxy
 * @LastEditTime: 2025-01-11 23:48:55
 * @FilePath: \xy-admin\play\src\stores\config\index.ts
 */

import { defineStore } from 'pinia'
import { powerStore } from '../power'
import store from '../index'
import { changeThemeDarkLight, createStyle, matchColor, matchSize } from './utils'
import { storageRead, storageSet } from '@/utils/storage'
import { colorScheme, pxToRem } from '@/utils'
import router from '@/router'
import { i18n } from '@/i18n'

/**
 * @description: tag各标签类型style集合
 */
const tagTypeStyle = {
  fusion: {
    '--tag-bottom-padding': 0
  },
  tags: {
    '--tag-bottom-padding': 4
  }
}

/**
 * @description: 初始化配置值
 */
const configInit: ConfigType = {
  locale: '中文', // 语言类型
  globalComponentSize: 'default,1', // 全局組件大小
  menuMode: 'leftMode', // upMode: 上  leftMode: 左  upLeftMode: 上左
  darkLight: colorScheme(), // 暗黑模式
  menuCollapse: false, // 菜单是否折叠
  isFullScreen: false, // 是否全屏
  isFullScreenContent: false, // 是否内容区全屏
  themeAppearance: '#409eff', // 主题外观

  isTag: true, // 是否显示标签
  isTagClose: true,
  isTagIcon: true, // 是否显示标签图标
  isCache: true, // 是否储存标签
  maxCache: 10, // keepAlive 最大缓存数
  tagType: 'fusion', // fusion: 融合  tags: 卡片
  '--tag-font-size': 12, // 标签字体大小
  '--tag-height': 32, // 标签高度
  '--tag-max-width': 135, // 标签最大宽度
  ...tagTypeStyle.fusion, // 标签样式
  '--tag-left-right-padding': 18, // 标签左右边距
  '--tag-top-padding': 4, // 标签上边距
  '--tag-offset-distance': 8, // 标签字体到阴影距离

  isMenuLogo: false, // 是否显示菜单logo
  '--menu-font-size': 14, // 文字大小
  '--menu-icon-width': 18, // icon大小
  '--menu-color-text': '', // 文字颜色
  '--menu-left-width': 200, // 菜单宽度
  '--menu-item-height': 50, // 菜单项高度
  '--menu-left-collapse-width': 62, // 菜单折叠后宽度
  '--menu-color-bg': '', // 菜单背景颜色
  '--menu-color-subStyle-bg': '', // 子菜单背景颜色
  '--menu-color-active-text': '', // 菜单激活文字样式
  '--menu-color-active-bg': '', // 菜单激活背景样式
  '--menu-color-hover-text': '', // 菜单滑过文字样式
  '--menu-color-hover-bg': '', // 菜单滑过背景样式
  '--menu-switch-height': 38, // 菜单滑过背景样式

  isBreadcrumb: true, //是否显示面包屑
  isBreadcrumbIcon: true, //是否显示面包屑图标
  '--breadcrumb-font-size': 12, // 面包屑字体大小
  '--breadcrumb-color-text': '', // 面包屑字体颜色

  '--header-height': 50, // 顶部高度
  '--header-color-bg': '', // 顶部背景颜色
  '--header-menu-width': 140, // 顶部菜单最大宽度
  '--header-menu-color-text': '', // 顶部菜单字体颜色
  '--header-right-font-size': 20, // 顶部右侧字体大小
  '--header-right-color-text': '', // 顶部右侧字体颜色
  '--header-border-bottom': 3, // 底边框大小
  isHeaderLogo: true, // 是否显示顶部logo

  layout: 'upperLower', // 页面结构 leftRight: 左右  upperLower: 上下

  isPageAnimation: true, // 是否关闭过场动画
  enterFromClass: 'right', // 进场动画class
  leaveToClass: 'right', // 离场动画
  isWatermark: true, // 是否展示水印
  watermarkText: 'xy-admin', // 水印文字
  watermarkColor: '', // 文字颜色
  watermarkFontSize: 15, // 文字大小
  watermarkRotate: -22, // 旋转角度
  watermarkGap: [150, 150], // 间距
  watermarkOffset: [0, 0] // 偏移
}

const configLocalStore = storageRead('config')
if (!configLocalStore) storageSet('config', configInit)

export const useConfig = defineStore('config', () => {
  /* 更新config字段去合并到拿取的storage，防止新加字段无法获取值 */
  const config: ConfigType = reactive(configLocalStore ? { ...configInit, ...configLocalStore } : configInit)

  /**
   * @description: 改变主题外观
   * @param {string} className 主题class类名
   */
  const htmlDom = document.querySelectorAll('html')
  const changeDarkLight = (className: 'dark' | 'light'): void => {
    htmlDom[0].className = className
    config.darkLight = className
    changeThemeDarkLight(config.darkLight, config.themeAppearance)
  }

  /**
   * @description: 改变菜单模式
   */
  const changeMenuMode = () => {
    const modeData = ['upMode', 'leftMode', 'upLeftMode']
    let modeIndex = modeData.indexOf(config.menuMode)
    modeIndex = modeIndex === 2 ? 0 : ++modeIndex
    config.menuMode = modeData[modeIndex]
    powerStore.setMenuData(config.menuMode)
    router.replace('/refresh')
  }

  /**
   * @description: 改变菜单折叠方式
   */
  const changeMenuCollapse = () => (config.menuCollapse = !config.menuCollapse)

  /**
   * @description: 全屏
   */
  const changeFullScreen = () => {
    const element = document.documentElement
    try {
      config.isFullScreen = !config.isFullScreen
      config.isFullScreen ? element.requestFullscreen() : document.exitFullscreen()
    } catch (error) {
      console.error(`不支持全屏${error}`)
    }
  }

  /**
   * @description: 内容区全屏
   */
  const changeFullScreenContent = () => (config.isFullScreenContent = !config.isFullScreenContent)

  /**
   * @description: 主题颜色切换
   */
  const changeThemeAppearance = (color: string) => {
    config.themeAppearance = color
    changeThemeDarkLight(config.darkLight, config.themeAppearance)
  }

  /**
   * @description: 根据全局组件大小动态创建rem
   * @param {string} key
   * @param {number} val
   */
  const createRem = (key: string, val: number) =>
    createStyle({ [key]: pxToRem(val * +config.globalComponentSize.split(',')[1]) })

  /**
   * @description: 重置配置
   */
  const resetConfig = () => {
    config.isFullScreen && document.exitFullscreen()
    Object.entries(configInit).forEach(([key, val]) => {
      config[key as keyof ConfigType] = val as never
      !Array.isArray(val) && changeStyle(key, val)
    })
    changeDarkLight(config.darkLight)
    changeThemeAppearance(config.themeAppearance)
    powerStore.setMenuData(config.menuMode)
    ;(i18n.global.locale as any).value = config.locale
    router.replace('/refresh')
  }

  function init() {
    changeDarkLight(config.darkLight)
    Object.entries(config).forEach(([key, val]) => !Array.isArray(val) && changeStyle(key, val))
  }
  function changeStyle(key: string, val: string | number | boolean) {
    matchSize('[a-z]+').test(key) && createRem(key, +val)
    matchColor('[a-z]+').test(key) && createStyle({ [key]: String(val) })
  }
  init()

  watch(
    () => config,
    newVal => storageSet('config', newVal),
    { deep: true }
  )

  watch(
    () => config.tagType,
    newVal => {
      Object.entries(tagTypeStyle[newVal]).forEach(([key, val]) => createRem(key, val))
      Object.assign(config, tagTypeStyle[newVal])
    }
  )

  return {
    init,
    config,
    createRem,
    resetConfig,
    changeMenuMode,
    changeDarkLight,
    changeFullScreen,
    changeMenuCollapse,
    changeThemeAppearance,
    changeFullScreenContent
  }
})

export const configStore = useConfig(store)
